<template>
  <el-dialog :close-on-click-modal="false" width="1200px" :title="$t('m.reduction.return')" :visible.sync="popupVisible" :before-close="close">
    <el-form align="left" ref="form" :model="formInline" label-width="120px">
      <el-row>
        <el-col :span="16">
          <el-form-item :label="$t('m.out.pickingtaskcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" @keydown.enter.native=getData @blur="getData"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" @click="getData" :disabled="false" :loading="searchBtnLoading">{{$t('m.query')}}</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item :label="$t('m.location.locationcode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.locationcode" :disabled="!isPermited"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="right">
          <el-button type="primary" @click="submit" :disabled="!isPermited">{{$t('m.reduction.confirm')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- table start -->
    <el-row v-show="isPermited">
      <el-col :span="24">
         <el-table
          ref="table"
          stripe
          empty-text
          fit
          tooltip-effect="dark"
          size="mini"
          :data="tableData"
          :span-method="objectSpanMethod">
          <el-table-column align="center" prop="productspeccode" label="sku"></el-table-column>
          <el-table-column align="center" prop="suppliercode" label="supplierCode"></el-table-column>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')"></el-table-column>
          <el-table-column align="center" prop="tasknumber" :label="$t('m.task')+'ID'"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')"></el-table-column>
          <el-table-column align="center" prop="quantity" :label="$t('m.out.quantity')"></el-table-column>
          <el-table-column align="center" prop="state" :label="$t('m.state')" :formatter="stateFormatter"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table end -->
    <el-row>
      <el-col :span="24">
        <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
export default {
  name:'reduction-popup',
  props:['popupVisible','tasknumber'],
  data(){
    return {
      formInline:{
        tasknumber:'', // 拣货任务号
        locationcode:'' // 库位编码
      },
      isPermited:false, // 控制【确认拣货】按钮的disabled状态
      searchBtnLoading:false, // 控制按钮loading，防止重复提交
      submitBtnLoading:false, // 控制按钮loading，防止重复提交

      tableData:[],
      stateOptions:[
        { value:1, label:this.$t('m.reduction.state1') },
        { value:2, label:this.$t('m.reduction.state2') },
        { value:9, label:this.$t('m.reduction.state9') },
        { value:10, label:this.$t('m.reduction.state10') }
      ]
    }
  },
  mounted(){
    if(this.tasknumber){
      this.formInline.tasknumber = this.tasknumber
      this.getData()
    }
  },
  components:{

  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    close(){
      this.$emit('close')
    },
    // 根据拣货任务号，获取明细
    getData(){
      if(!this.formInline.tasknumber) return this.callbackMessage(this.$t('m.pick.requirePickingtaskCode'))
      let options = {
        method:'get',
        url:`/returntask/getreturntaskbycode?tasknumber=${this.formInline.tasknumber}`
      }
      this.searchBtnLoading = true
      this.$axios(options).then(({ data }) => {
        this.searchBtnLoading = false
        this.isPermited = true
        this.tableData = data
        this.ruleSpanMethod()
      }).catch(()=>{
        this.searchBtnLoading = this.isPermited = false
        this.formInline.locationcode = ''
      })
    },
    // 确认还货
    submit(){
      if(!this.formInline.locationcode) return this.callbackMessage(this.$t('m.pick.requireLocationCode'))
      // 匹配拣货任务单号
      let result = this.tableData.some((item)=>item.tasknumber === this.formInline.tasknumber)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutRecord'))
      // 匹配库位编码
      result = this.tableData.some((item)=>item.locationcode === this.formInline.locationcode)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutLocation'))
      // 匹配指定明细（条件：拣货任务单号+库位编码）
      result = this.tableData.find((item)=>item.tasknumber === this.formInline.tasknumber && item.locationcode === this.formInline.locationcode)
      if(!result) return this.callbackMessage(this.$t('m.pick.withoutRecord'))
      if(result.state!==2) return this.callbackMessage(this.$t('m.pick.isProhibited'))

      let options = {
        method:'get',
        url:`/returntask/returngoods`,
        params:this.formInline
      }
      this.submitBtnLoading = true
      this.$axios(options).then(({ message }) => {
        this.submitBtnLoading = false
        this.callbackMessage(message,'success')
        this.$emit('callback')
        this.$emit('close')
      }).catch(()=>{
        this.submitBtnLoading = false
      })
    },
    // 表格缩进规则
    ruleSpanMethod(){
      let __index = 0
      let code = ''
      this.getMergeRows = []
      this.tableData.forEach((item,index)=>{
        if(!item.productspeccode){
          this.getMergeRows.push(1)
        } else if(item.productspeccode !== code){
          this.getMergeRows.push(1)
          code = item.productspeccode
          __index = index
        } else {
          if(code){
            ++this.getMergeRows[__index]
            this.getMergeRows.push(0)
          }
        }
      })
    },
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [0,1,2,3]
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    },
    // 表格状态过滤
    stateFormatter(row){
      let result = this.stateOptions.find((item) => item.value === row.state)
      if (result) return result.label
      else return '---'
    }
  }
}
</script>
<style lang="scss" scoped>

</style>